<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
    </style>
</head>
<body>
    <p>文字</p>
    <p>文字2</p>
<script>
/* 
1. 编写一个通用的事件监听函数
2. 描述事件冒泡流程
3.  无限下拉的图片列表，如果监听每个图片的点击
*/

// 事件的绑
btn.addEventListener("click",e=>{console.log('click')})
 
//  通用的事件绑定函数
function bindEvent(elem,type,fn){
    elem.addEventListener(type,fn);
}
const a  = document.getElementById("link1");
bindEvent(a,"click",e=>{
    e.preventDefault();
    alert("clicked");
})

const p1 = document.getElementById("p1");
const body = document.body;
bindEvent(p1,"click",e=>{
    // e.stopPropagation(); 停止事件冒泡
    alert("激活");
    console.log(e.target);
})

bindEvent(body,"click",e=>{
    // e.stopPropagation(); 停止事件冒泡
    alert("取消");
    console.log(e.target);//谁触发的。
})




//  事件代理 瀑布流
const div1 = document.getElementById("div1");
div1.addEventListener("click",e=>{
    const target = e.target;
    if(e.nodeName==='A'){
        alert(target.innerHTML);
    }
})
// 所谓代理，不好每个挨个绑定事件，把他们绑定到父元素上，获取到触发的元素，
// 做些判断，拿到触发元素左些动作
// 基于事件冒泡机制的。

// 01 代码简洁，02减少对浏览器内存占用,03不要滥用

/* function add(){
    var p = document.createElement("p");
    p.innerHTML="good p";
    document.body.append(p);
}
var ps =document.querySelectorAll("p");
// for(var i=0;i<ps.length;i++){
//     ps[i].addEventListener("click",e=>console.log(e.target.innerHTML));
// }

document.body.addEventListener("click",e=>{
    if(e.target.nodeName=="P"){
        alert(e.target.innerHTML)
    }
})
function on(el,type,selector,callback){
    var subs = el.querySelectorAll(selector);
    el.addEventListener(type,e=>{
         for(var i = 0;i<subs.length;i++){
             if(e.target==subs[i]){
                 callback(subs[i]);
                 break;
             }
         }
    })
}
on(document.body,"click","p",el=>{
    console.log(el.innerHTML);
}) */
</script>
</body>
</html>